<!DOCTYPE html>
<!-- saved from url=(0048)http://www.qietu.com/html/2021/faren//index.html -->
<html lang="zh-cmn-Hans">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <link rel="stylesheet" th:href="@{./index_files/css/qietu.css}">
    <link rel="stylesheet" th:href="@{./index_files/css/style.css}">


</head>

<body>
    <div id="app" class="container">
        <div class="leftside">
            <div class="logo"><a href="#"><img th:src="@{./index_files/images/logo.png}"></a>
            </div>
            <div class="nav">
                <li class="active"><a href="#">首 页</a></li>
                <ul id="MyMenu">

                </ul>
            </div>
            <div class="stat">
                访问计数：254598
            </div>
        </div>
        <div class=" hmainpage">
            <div class="header">
                <div class="quan">
                    <h4>厦门市法人和其他组织<br>
                        实时统计数</h4>
                    <h2>567905</h2>
                    <ul>
                        <li><label>法人数</label>287952</li>
                        <li><label>其他组织数</label>279953</li>
                    </ul>
                </div>
            </div>
            <div class="search">
                <form><input type="text" name="" id="" value="" placeholder="请输入统一代码/代码号/注册号/机构名称/法定代表人身份证号码等关键词"
                        class="txt"> <input type="submit" name="" id="" value="查询" class="btn"></form>
            </div>
            <div class="chart">
                <div class="chart-l">
                    <div class="head">
                        <h2>上月新增机构分布</h2>
                    </div>
                    <div class="body">
                        <div id="pie1" _echarts_instance_="ec_1655465965723"
                            style="width: 350px; height: 280px; margin: 0px auto; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
                            <div
                                style="position: relative; overflow: hidden; width: 350px; height: 280px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                                <canvas data-zr-dom-id="zr_0" width="437" height="350"
                                    style="position: absolute; left: 0px; top: 0px; width: 350px; height: 280px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </div>
                <div class="chart-r">
                    <div class="head">
                        <h2>截止上月末存量企业银行开户比例</h2>
                    </div>
                    <div class="body">
                        <div id="pie2" _echarts_instance_="ec_1655465965722"
                            style="width: 350px; height: 280px; margin: 0px auto; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
                            <div
                                style="position: relative; overflow: hidden; width: 350px; height: 280px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                                <canvas data-zr-dom-id="zr_0" width="437" height="350"
                                    style="position: absolute; left: 0px; top: 0px; width: 350px; height: 280px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <p>版权所有：厦门市标准化研究院 XiaMen Institute of Standardization &nbsp;闽ICP备09004615号闽公网安备
                    35020302033918号 <br>
                    地址：厦门市思明区湖滨南路170号大楼八楼西侧 &nbsp; 邮编：361004 &nbsp; 邮箱：byy@xmzjj.gov.cn </p>
            </div>
        </div>
        <div class="hrightside">
            <div class="type">
                <div class="head">
                    <h2>创业五大热门行业</h2>
                    <p>单位：家</p>
                </div>
                <div class="body" id="container"></div>
            </div>
            <div class="type">
                <div class="head">
                    <h2>上月增速最快五大行业</h2>
                </div>
                <div class="body" id="container2"></div>
            </div>
            <div class="type">
                <div class="head">
                    <h2>昨日五大</h2>
                    <p>单位：万元</p>
                </div>
                <div class="body" id="container3"> </div>
            </div>
        </div>
    </div>
    <script th:src="@{./index_files/js/vue.js.下载}"></script>
    <script th:src="@{./index_files/js/echarts.min.js.下载}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{./index_files/js/jquery-3.5.1.min.js}"></script>
    <script id="echartsjs" src="https://cdn.staticfile.org/echarts/5.2.2/echarts.min.js"></script>
    <script th:src="@{./index_files/js/Index.js}"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    txt: '123',

                }
            },
            computed: {},
            methods: {},
            mounted: function () {
                var myChart1 = echarts.init(document.getElementById('pie2'));
                var option1 = {
                    title: {
                        show: false,
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        left: 'left',
                        data: ['个体工商户', '非商事主体', '企业']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['55%', '70%'],
                            //radius : '55%',
                            //center: ['50%', '60%'],

                            labelLine: {
                                normal: {
                                    length: 20,
                                    length2: 0,
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                }

                            },
                            label: {
                                normal: {
                                    formatter: "{b} {d}%",

                                    textStyle: {
                                        //fontFamily : "微软雅黑",
                                        fontSize: 14,
                                        color: '#fff'

                                    }
                                }
                            },
                            data: [
                                { value: 55, name: '开户' },
                                { value: 45, name: '未开户' }
                            ],
                            color: ['#09faf1', '#3c7bfe'],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },

                            }
                        }
                    ]
                };


                // 为echarts对象加载数据
                myChart1.setOption(option1);


                var myChart2 = echarts.init(document.getElementById('pie1'));
                var option2 = {
                    title: {
                        show: false,
                        text: '',
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        left: 'left',
                        data: ['社团', '民非', '工会', '其他机构', '事业单位', '机关', '企业', '个体户']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            //radius : '55%',1
                            //center: ['50%', '60%'],
                            labelLine: {
                                normal: {
                                    length: 20,
                                    length2: 0,
                                    lineStyle: {
                                        color: '#fff'
                                    }
                                }

                            },
                            label: {
                                normal: {
                                    formatter: '{b}',


                                    textStyle: {
                                        //fontFamily : "微软雅黑",
                                        fontSize: 14,
                                        color: '#fff',
                                        lineHeight: 40

                                    }
                                }
                            },
                            data: [
                                { value: 30, name: '工会法人' },
                                { value: 20, name: '机关' },
                                { value: 10, name: '社团' },
                                { value: 10, name: '事业单位' },
                                { value: 10, name: '民办非企业' },
                                { value: 60, name: '其他机构' }
                            ],
                            color: ['#e0a10f', '#31dfb1', '#e25e4a', '#1890d2', '#a13fd1', '#c02c94', '#2e8dca', '#4851d1'],
                            itemStyle: {
                                //              emphasis: {
                                //                  shadowBlur: 10,
                                //                  shadowOffsetX: 0,
                                //                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                //              },
                            }
                        }
                    ]
                };


                // 为echarts对象加载数据
                myChart2.setOption(option2);

                $.ajax({
                    url: "/Mecha/data", //请求控制层接口
                    cache: false,
                    async: false,
                    type: 'GET',
                    success: (data) => {
                        console.log(JSON.stringify(data.MechaData));
                        myChart2.setOption({
                            title: {
                                show: false,
                                text: '',
                                subtext: '',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                show: false,
                                orient: 'vertical',
                                left: 'left',
                                data: ['社团', '民非', '工会', '其他机构', '事业单位', '机关', '企业', '个体户']
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    //radius : '55%',1
                                    //center: ['50%', '60%'],
                                    labelLine: {
                                        normal: {
                                            length: 20,
                                            length2: 0,
                                            lineStyle: {
                                                color: '#fff'
                                            }
                                        }

                                    },
                                    label: {
                                        normal: {
                                            formatter: '{b}',


                                            textStyle: {
                                                //fontFamily : "微软雅黑",
                                                fontSize: 14,
                                                color: '#fff',
                                                lineHeight: 40

                                            }
                                        }
                                    },
                                    data: data.MechaData,
                                    color: ['#e0a10f', '#31dfb1', '#e25e4a', '#1890d2', '#a13fd1', '#c02c94', '#2e8dca', '#4851d1'],
                                    itemStyle: {
                                        //              emphasis: {
                                        //                  shadowBlur: 10,
                                        //                  shadowOffsetX: 0,
                                        //                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        //              },
                                    }
                                }
                            ]
                        })
                    },
                    error: function (data) {
                        alert(1);
                    }
                })


                var dom = document.querySelector(".hrightside .type #container");
                var myChart3 = echarts.init(dom);
                app = {};

                //var companyData = [];


                /*
                let companyData = [
                    { companyTypeCode: '1120', companyTypeName: '批发业', totalNumber: 688 },
                    { companyTypeCode: '1163', companyTypeName: '零售业', totalNumber: 624 },
                    { companyTypeCode: '10000', companyTypeName: '商务服务业', totalNumber: 539 },
                    { companyTypeCode: '1112', companyTypeName: '软件和信息技术服务业', totalNumber: 453 },
                    { companyTypeCode: '1000', companyTypeName: '其他服务业', totalNumber: 386 },
                ];
                */
                let dataName = [];
                let data1 = [];
                let defaultData = [];
                let maxData = 0;

                $.ajax({
                    url: "/Industry/data", //请求控制层接口
                    cache: false,
                    async: false,
                    type: 'GET',
                    success: (data) => {
                        //console.log(JSON.stringify(data.IndustryData));//num
                        //console.log(data.IndustryData[0].companyTypeName);
                        //console.log(data.IndustryData[0].totalNumber);
                        data.IndustryData.forEach((item) => {
                            dataName.push(item.companyTypeName);
                            data1.push(item.totalNumber);
                            if (maxData < item.totalNumber) {
                                maxData = item.totalNumber;
                            }
                        })
                    },
                    error: function (data) {
                        alert(1);
                    }
                })
                /*
                companyData.forEach((item) => {
                    dataName.push(item.companyTypeName);
                    data1.push(item.totalNumber);
                    if (maxData < item.totalNumber) {
                        maxData = item.totalNumber;
                    }
                });
                */
                for (let i = 0; i < data1.length; i++) {
                    defaultData.push(maxData);
                }
                var colorList = [
                    '#00AAFF',
                    '#A52A2A',
                    '#FF752D',
                    '#FFCF31',
                    '#FF3129',
                    '#006400',
                    '#8B4513',
                    '#FF8C00',
                    '#FFB6C1',
                    '#7B68EE',
                    '#87CEFA',
                    '#008000',
                    '#D2B48C',
                ];
                // var defaultData = [800, 800, 800, 800]
                var option3 = {
                    backgroundColor: '#36467E',
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        top: '10%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                        position: function (point, params, dom, rect, size) {
                            //console.log("params"+params)

                            return [point[0], point[1]];
                        },
                        confine: false,
                        // formatter: '{b}:{c}'
                        formatter: function (params) {
                            // console.log(params)
                            let title = params[0].name;
                            if (title.length > 30) {
                                title = title.substring(0, 15) + '<br/>' + title.substring(15, 30) + '<br/>' + title.substring(30);
                            } else if (title.length > 15) {
                                title = title.substring(0, 15) + '<br/>' + title.substring(15);
                            }
                            let name = title + ' : ' + params[0].value;
                            return name;
                        },
                    },
                    // backgroundColor: 'rgb(20,28,52)',
                    xAxis: {
                        show: false,
                        type: 'value',
                    },
                    yAxis: [
                        {
                            type: 'category',
                            inverse: true,
                            // axisLabel: {
                            //   show: true,
                            //   textStyle: {
                            //     color: '#fff'
                            //   },
                            //   rotate: 0
                            // },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#ffffff',
                                    fontSize: '12',
                                },
                                formatter: function (value) {
                                    value = value.length > 7 ? value.substring(0, 7) + '...' : value;
                                    return value;
                                },
                            },
                            data: dataName,
                        },
                        {
                            type: 'category',
                            inverse: true,
                            axisTick: 'none',
                            axisLine: 'none',
                            show: true,
                            axisLabel: {
                                textStyle: {
                                    color: '#ffffff',
                                    fontSize: '12',
                                },
                                formatter: function (value) {
                                    return value;
                                },
                            },
                            data: data1,
                        },
                    ],
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [0, 30, 30, 0],
                                    color: (params) => {
                                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            {
                                                offset: 0,
                                                color: 'rgba(54,69,129,1)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: colorList[params.dataIndex],
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(255,255,255,0.8)',
                                            },
                                        ]);
                                    },
                                    // color: (params) => {
                                    //   return colorList[params.dataIndex]
                                    // }
                                },
                            },
                            barWidth: 15,
                            data: data1,
                        },
                        {
                            name: '背景',
                            type: 'bar',
                            barWidth: 15,
                            barGap: '-100%',
                            data: defaultData,
                            itemStyle: {
                                normal: {
                                    color: '#1B375E',
                                    barBorderRadius: [0, 30, 30, 0],
                                },
                            },
                        },
                    ],
                };

                if (option3 && typeof option3 === 'object') {
                    myChart3.setOption(option3);
                }



                var dom4 = document.querySelector(".hrightside .type #container2");
                var myChart4 = echarts.init(dom4);
                app = {};

                let xAxisData = [];
                let seriesData1 = [];
                let sum = 0;
                let barTopColor = ['#02c3f1', '#53e568', '#02c3f1', '#53e568', '#02c3f1', '#53e568', '#02c3f1', '#53e568',];
                let barBottomColor = [
                    'rgba(2,195,241,0.1)',
                    'rgba(83, 229, 104, 0.1)',

                    'rgba(2,195,241,0.1)',
                    'rgba(83, 229, 104, 0.1)',

                    'rgba(2,195,241,0.1)',
                    'rgba(83, 229, 104, 0.1)',

                    'rgba(2,195,241,0.1)',
                    'rgba(83, 229, 104, 0.1)',
                ];
                $.ajax({
                    url: "/Industry/data", //请求控制层接口
                    cache: false,
                    async: false,
                    type: 'GET',
                    success: (data) => {
                        data.IndustryData.forEach((item) => {
                            xAxisData.push(item.companyTypeName);
                            seriesData1.push(item.totalNumber);
                            sum += item.value;
                        })
                    },
                    error: function (data) {
                        alert(1);
                    }
                })
                /*
                data4.forEach((item) => {
                    xAxisData.push(item.name);
                    seriesData1.push(item.value);
                    sum += item.value;
                });
                */
                option4 = {
                    backgroundColor: '#274A75',
                    grid: {
                        top: '20%',
                        bottom: '100',
                        left: '50',
                        right: '100',
                        containLabel: false,
                    },
                    xAxis: {
                        data: xAxisData,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 25,
                            rotate: 25,
                            align: 'center',
                            textStyle: {
                                fontSize: 12,
                                color: '#ffffff',
                            },
                        },
                        interval: 0,
                    },
                    yAxis: {
                        type: 'value',
                        // name: '件',
                        nameTextStyle: {
                            color: '#FFFFFF',
                            fontSize: 12,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: '柱顶部',
                            type: 'pictorialBar',
                            symbolSize: [26, 10],
                            symbolOffset: [0, -5],
                            z: 12,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return barTopColor[params.dataIndex];
                                    },
                                },
                            },
                            label: {
                                show: false,
                                position: 'top',
                                fontSize: 16,
                            },
                            symbolPosition: 'end',
                            data: seriesData1,
                        },
                        {
                            name: '柱底部',
                            type: 'pictorialBar',
                            symbolSize: [26, 10],
                            symbolOffset: [0, 5],
                            z: 12,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return barTopColor[params.dataIndex];
                                    },
                                },
                            },
                            data: seriesData1,
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 1,
                                                color: barTopColor[params.dataIndex],
                                            },
                                            {
                                                offset: 0,
                                                color: barBottomColor[params.dataIndex],
                                            },
                                        ]);
                                    },
                                    opacity: 0.8,
                                },
                            },
                            z: 16,
                            silent: true,
                            barWidth: 26,
                            barGap: '-100%', // Make series be overlap
                            data: seriesData1,
                        },
                    ],
                };

                if (option4 && typeof option4 === 'object') {
                    myChart4.setOption(option4);
                }


                var dom5 = document.querySelector(".hrightside .type #container3");
                var myChart5 = echarts.init(dom5);
                option5 = {
                    tooltip: { show: false },
                    grid: { left: 10, top: 10, bottom: 20, right: 10, containLabel: true },
                    xAxis: {
                        type: 'value',
                        boundaryGap: false,
                        max: 20, // Math.ceil(max / 4) * 5 || 10
                        axisLine: { show: true, lineStyle: { color: '#ccc' } },
                        axisTick: { show: false },
                        axisLabel: { color: '#999' },
                        splitLine: { lineStyle: { color: ['#CEEDFF'], type: [5, 8], dashOffset: 3 } },
                    },
                    yAxis: {
                        type: 'category',
                        data: [
                            '厦门金龙旅行车有限公司',
                            '厦门钨业股份有限公司',
                            '协助进食/水',
                            '整理床位',
                        ],
                        axisLine: { show: true, lineStyle: { color: '#ccc' } },
                        axisTick: { length: 3 },
                        axisLabel: { fontSize: 14, color: '#666', margin: 16, padding: 0 },
                        inverse: true,
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: { color: 'rgba(82, 168, 255, 0.1)', borderRadius: [0, 8, 8, 0] },
                            itemStyle: {
                                color: '#52A8FF',
                                normal: {
                                    borderRadius: [0, 8, 8, 0],
                                    color: function (params) {
                                        // 定义一个颜色集合
                                        let colorList = [
                                            '#52A8FF',
                                            '#00B389',
                                            '#FFA940',
                                            '#FF5A57',
                                            '#29EFC4',
                                            '#F8AEA4',
                                            '#FFC53D',
                                            '#009982',
                                            '#C099FC',
                                            '#F5855F',
                                        ];
                                        // 对每个bar显示一种颜色
                                        return colorList[params.dataIndex];
                                    },
                                },
                            },
                            barMaxWidth: 16,
                            label: { show: true, position: 'insideRight', offset: [-5, 2], color: '#fff' },
                            data: [15, 12, 12, 11, 11, 11, 11, 7, 6, 3],
                        },
                    ],
                };



                myChart5.setOption(option5);

                $.ajax({
                    url: "/Company/data", //请求控制层接口
                    cache: false,
                    async: false,
                    type: 'GET',
                    success: (data) => {
                        let CoName = [];
                        let CoMany = [];
                        //console.log(JSON.stringify(data.CompanyData));
                        data.CompanyData.forEach((item) => {
                            CoName.push(item.CoName);
                            CoMany.push(item.CoMany);
                        })
                        myChart5.setOption({
                            tooltip: { show: false },
                            grid: { left: 10, top: 10, bottom: 20, right: 10, containLabel: true },
                            xAxis: {
                                type: 'value',
                                boundaryGap: false,
                                max: 800, // Math.ceil(max / 4) * 5 || 10
                                axisLine: { show: true, lineStyle: { color: '#ccc' } },
                                axisTick: { show: false },
                                axisLabel: { color: '#999' },
                                splitLine: { lineStyle: { color: ['#CEEDFF'], type: [5, 8], dashOffset: 3 } },
                            },
                            yAxis: {
                                type: 'category',
                                data: CoName,
                                axisLine: { show: true, lineStyle: { color: '#ccc' } },
                                axisTick: { length: 3 },
                                axisLabel: { fontSize: 14, color: '#FFF', margin: 16, padding: 0 },
                                inverse: true,
                            },
                            series: [
                                {
                                    name: '数量',
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: { color: 'rgba(82, 168, 255, 0.1)', borderRadius: [0, 8, 8, 0] },
                                    itemStyle: {
                                        color: '#52A8FF',
                                        normal: {
                                            borderRadius: [0, 8, 8, 0],
                                            color: function (params) {
                                                // 定义一个颜色集合
                                                let colorList = [
                                                    '#52A8FF',
                                                    '#00B389',
                                                    '#FFA940',
                                                    '#FF5A57',
                                                    '#29EFC4',
                                                    '#F8AEA4',
                                                    '#FFC53D',
                                                    '#009982',
                                                    '#C099FC',
                                                    '#F5855F',
                                                ];
                                                // 对每个bar显示一种颜色
                                                return colorList[params.dataIndex];
                                            },
                                        },
                                    },
                                    barMaxWidth: 16,
                                    label: { show: true, position: 'insideRight', offset: [-5, 2], color: '#fff' },
                                    data: CoMany,
                                },
                            ]
                        })
                    },
                    error: function (data) {
                        alert(1);
                    }
                })


            },
            created: function () {

            }
        })
    </script>


</body>

</html>